import React, { Component } from "react";
import IndexCss from "./index.module.scss";
import { connect } from "react-redux";

// 引入 增加组件的 函数 => 让组件获取到 路由对象
//  导出组件的使用 把这个组件 包起来即可
import { withRouter } from "react-router-dom";

class CityInput extends Component {
  render() {
    // 不知道为什么  组件中 没有 路由信息对象？？ 
    // console.log(this.props.history.push("/"));
    const { history } = this.props;
    return (
      <div className={IndexCss.city_input_wrap}>
        <div className={IndexCss.city_input}>
          <div className={IndexCss.city_name} onClick={() => history.push("/citychooese")} >
            <span>{this.props.cityName}</span>
            {/* 字体图标 既可以使用上 iconfont的类名  同时 这个类名也可以被我们的局部样式所失败和使用 */}
            <i className={" iconfont icon-arrow " + IndexCss["icon-arrow"]}></i>
          </div>
          <div className={IndexCss.city_search}>
            <i className={"iconfont icon-seach " + IndexCss["icon-seach"]}></i>
            <span>其输入小区或地址</span>
          </div>
        </div>
        <div className={IndexCss.city_map} onClick={()=>history.push("/mapcity")} >
          <span className={"iconfont icon-map " + IndexCss["icon-map"]}></span>
        </div>
      </div >
    );
  }
}

const mapStoreToProps = (state) => {
  return {
    cityName: state.mapReducer.city.name
  }
}


// export default connect(mapStoreToProps, null)(withRouter(CityInput));

// withRouter 增加了组件的功能 路由功能
// connect 增强了组件的功能   全局数据功能
// 增强的函数  放心的加 调用 

export default withRouter(connect(mapStoreToProps, null)(CityInput));
